<template>
  <div>
    <h1>人员名单及爱好列表</h1>
    <ul>
      <!-- props传值的时候 批量展开传递 -->
      <Item
        v-for="p in person"
        :key="p.id"
        v-bind="p"
        :deletePersonById="deletePersonById"
      />
    </ul>
  </div>
</template>

<script>
import Item from './components/Item.vue';
export default {
  name: 'App',
  components: {
    Item,
  },
  data() {
    return {
      person: [
        { id: 1, name: '老余', hobby: ['吃', '喝', 'Piao'] },
        { id: 2, name: '陈伟', hobby: ['唱', '跳', 'Rap'] },
        { id: 3, name: '老李', hobby: ['打球', '看书', '写字'] },
      ],
    };
  },
  methods: {
    /* 
      props做子传父：
        1.props自己封装一个函数，并把函数通过props的形式传递给子组件
        2.子组件接收这个函数，并调用传参
        3.父组件的函数就被执行，并且接收到了参数，完成子传父

      总结：
        props传值：父传子
        props传函数：子传父
    */
    deletePersonById(id) {
      // 删除数组中止的方法  2种
      // 1.splice：需要知道被删除元素的下标，并且每次只能删除一个
      // 2.filter：删除一个或者多个数组的元素，得到结果直接替换之前的数组
      this.person = this.person.filter((item) => {
        return item.id !== id;
      });
    },
  },
};
</script>

<style></style>
